<script setup lang="ts">
import { ref, onMounted } from "vue";
// import { useUserStore } from "@/store";
// import { getCaptcha, postTest } from "@/api/test";
import { getCaptcha } from "@/api/test";

// import { Service } from "@/api/client/services/Service";
// import { SocketApiService } from "@/api/client/services/SocketApiService";
defineOptions({
  name: "MyTest",
});

withDefaults(defineProps<{ msg?: string; defaultValue?: number }>(), {
  msg: "",
  defaultValue: 1000,
});

// const userStore = useUserStore();
// console.log(props.msg, userStore.name, typeof useUserStore.name);

const count = ref(0);
onMounted(async () => {
  console.log("onMounted");
  try {
    // const res = await Promise.all([getCaptcha(), getCaptcha()]);

    const [err, res] = await getCaptcha();
    console.log("err: ", err, res);
  } catch (error) {
    console.log("try catch error: ", error);
  }
});

// const test = () => {};
// const arr = ref([]);
</script>

<template>
  <h1>{{ msg || defaultValue }}</h1>

  <hello-world></hello-world>
  <el-button type="primary">123</el-button>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <!-- <button type="button" @click="test">age is {{ userStore }}</button> -->
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the
    official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank"
      >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
